<template>
  <div>
     <div class="tabControl" >
        <div class="tabControlTop">
          <p><span class="iconfont">&#xe652;</span><span>写文章</span></p>
          <p><span class="iconfont">&#xe618;</span><span>草稿</span></p>
        </div>
        <div class="tabControlCenter"><span></span>
          <p><span class="iconfont">&#xe67b;</span><span>我的主页</span></p>
          <p><span class="iconfont">&#xe60c;</span><span>我赞过的</span></p>
          <p><span class="iconfont">&#xe60d;</span><span>我的小册</span></p>
          <p><span class="iconfont">&#xe65f;</span><span>我的收藏集</span></p>
          <p><span class="iconfont">&#xe661;</span><span>标签管理</span></p>
        </div>
        <div class="tabControlSet">
          <p @click="editMessage"><span class="iconfont">&#xe654;</span><span>设置</span></p>
          <p><span class="iconfont">&#xe622;</span><span>关于</span></p>
        </div>
        <div class="tabControlBottom" @click="goOut()">
          <p><span class="iconfont">&#xe620;</span><span @click="loginOut">登出</span></p>
        </div>
      </div> 
  </div>
</template>

<script>
export default {
   methods:{
       goOut(){
           console.log(1)
       },
       editMessage(){
         this.$router.push('/edit')
         this.$store.commit('/edmitMessage')
       },
       //点击退出登陆
      loginOut(){
        this.$store.commit('myComisFalse')
        localStorage.removeItem('isLogin')
        this.$store.commit('changeLoginFalse')
      
      }
   }
}
</script>

<style scoped lang='scss'>
  .tabControl {
  width: 150px;
  background: #fff;
  position: absolute;
  top: 60px;
  right: 0;
  color: #71777c;
  border:1px solid lightgray;
  border-radius: 5px;
  z-index: 10;
  div{
    width: 100%;
    padding-top: 10px;
    border-bottom:1px solid rgb(231, 230, 230);
      p{
      width: 100%;
      height: 30px;
      line-height: 30px;
      cursor: pointer;
      padding-left: 5px;
      &:hover{
        background: #f8f8f8;
      }
      span{
          margin-left:0.8rem;
      }
    }
  }
  
}
// .tabControlTop,.tabControlCenter,.tabControlSet,.tabControlBottom{
//   overflow: hidden;
//   padding-top: 10px;
//   border-bottom:1px solid rgb(231, 230, 230);
// }
</style>